<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card shadow="always">
          <div class="tips">
            <div class="title">分值分析</div>
            <tips type="2" />
          </div>
          <score-interpretation
            ScoreType="tsjbScore"
            totalScore="tsjbTotalScore"
          ></score-interpretation>
          <!-- <rz-height></rz-height>
          <div class="line">
            <div class="left">
              <el-image
                style="width: 100px; height: 100px"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                fit="fill"
              ></el-image>
            </div>
            <div class="right">
                <tips :type="2"></tips>

              <div>{{ data.tsjbScore }}/{{ data.tsjbTotalScore }}分</div>
              <div>得分/总分值</div>
            </div>
          </div>
          <rz-height></rz-height>
          <div class="line">
            <div class="left">
              <el-image
                style="width: 100px; height: 100px"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                fit="fill"
              ></el-image>
            </div>
            <div class="right">
              <div>今日累计扣{{ data.tsjbTrend }}分</div>
            </div>
          </div> -->
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card shadow="always">
          <div class="title">近10天投诉举报分值分析</div>
          <rz-height></rz-height>
          <div class="food_line"></div>
        </el-card>
      </el-col>
    </el-row>
    <rz-height></rz-height>
    <rz-height></rz-height>
    <el-row>
      <el-col :span="24">
        <el-card shadow="always">
          <div class="dialog_titel">
            <div class="title">投诉举报记录列表</div>
            <!-- <el-button type="primary"></el-button> -->
            <!-- <add-dialog
              title="新增投诉举报记录"
              category="3"
              @success="
                query.page = 1;
                recordRindListByCondition();
              "
            ></add-dialog> -->
            <el-button type="primary" @click="addReport"
              >新增投诉举报记录</el-button
            >
          </div>
          <rz-height></rz-height>
          <!-- 类别：投诉，举报；办结更新时间、投诉问题类别、处理结果、部门名称、查看 -->
          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="score" label="类别" width="80">
              <template slot-scope="scope">
                <div>{{ scope.row.categoryType == 1 ? "投诉" : "举报" }}</div>
              </template>
            </el-table-column>
            <el-table-column label="发生日期" width="120">
              <template slot-scope="scope">
                <div>
                  {{
                    scope.row.happenTimeStr == "2111-01-01"
                      ? "--"
                      : scope.row.happenTimeStr
                  }}
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="reasonReason" label="投诉问题类别">
              <template slot-scope="scope">
                <div>{{ scope.row.appQueType }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="handResult" label="处理结果">
            </el-table-column>

            <el-table-column prop="source" label="部门名称" width="250">
            </el-table-column>

            <el-table-column prop="score" label="扣分分值" width="80">
              <template slot-scope="scope">
                <div>{{ scope.row.score }}</div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="operator" label="操作人"> </el-table-column> -->
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="view(scope.row)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <pagination
            :total="total"
            @pagination="recordRindListByCondition"
            :page.sync="query.page"
          />
        </el-card>
      </el-col>
    </el-row>

    <rz-height></rz-height>
    <rz-height></rz-height>
    <el-row>
      <el-col :span="24">
        <el-card shadow="always">
          <div class="dialog_titel">
            <div class="title">投诉举报扣分列表</div>
          </div>
          <rz-height></rz-height>
          <el-row>
            <el-col :span="5">
              <el-date-picker
                v-model="buckleQuery.startDate"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                :picker-options="$pickerOptions"
              >
              </el-date-picker>
            </el-col>
            <el-col :span="2">
              <el-button
                type="primary"
                @click="
                  buckleQuery.page = 1;
                  recordRindListByConditionBuckle();
                "
                >查询</el-button
              >
            </el-col>
          </el-row>
          <rz-height></rz-height>

          <el-table
            :data="buckleData"
            style="width: 100%"
            border
            v-loading="loading"
          >
            <el-table-column prop="createTimeStr" label="添加日期" width="180">
            </el-table-column>
            <el-table-column prop="reasonReason" label="扣分详情">
            </el-table-column>
            <el-table-column prop="score" label="扣分分值" width="100">
              <template slot-scope="scope">
                <div>{{ scope.row.score }}</div>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            :total="buckleTotal"
            @pagination="recordRindListByConditionBuckle"
            :page.sync="buckleQuery.page"
          />
        </el-card>
      </el-col>
    </el-row>

    <rz-dialog
      :dialogVisible.sync="show"
      title="查看投诉举报记录"
      width="50%"
      :isShowConfirm="false"
      @oncancel="
        () => {
          show = false;
        }
      "
    >
      <el-form :model="data" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="举报问题类别">
              {{ data.categoryType == 1 ? "投诉" : "举报" }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="主体地址">
              {{ data.ptAddr }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="投诉问题类别">
              {{ data.appQueType }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="处理结果">
              {{ data.handResult }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="发生日期">
              {{
                data.happenTimeStr == "2111-01-01" ? "--" : data.happenTimeStr
              }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="投诉要求">
              {{ data.reasonReason }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="经办人意见">
              {{ data.operatorOpinion || "--" }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否诉转案">
              {{ data.isTranCase }}
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="得分">
            {{data.score}}
            </el-form-item>
          </el-col>
           <el-col :span="12">
            <el-form-item label="操作人">
            {{data.operator}}
            </el-form-item>
          </el-col>
        </el-row> -->

        <el-row>
          <el-col :span="12">
            <el-form-item label="部门名称">
              {{ data.source }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </rz-dialog>

    <rz-dialog
      :dialogVisible.sync="report"
      :title="title"
      width="70%"
      @oncancel="
        () => {
          report = false;
        }
      "
      @onconfirm="onconfirm"
    >
      <el-form :model="send" label-width="120px" ref="ruleForm" :rules="rules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="类别">
              <el-radio-group v-model="send.type">
                <el-radio label="1">投诉</el-radio>
                <el-radio label="2">举报</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="问题类别" prop="repQueType">
              <el-input
                autosize
                type="textarea"
                placeholder="请输入问题类别"
                v-model="send.repQueType"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="发生时间">
              <el-date-picker
                :picker-options="pickerOptions"
                v-model="send.argueAccTime"
                type="date"
                size="small"
                width="100%"
                value-format="yyyy-MM-dd"
                :clearable="false"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="send.type=='1'">
            <el-form-item label="处理结果" prop="handResult">
              <el-input
              type="textarea"
               autosize
                placeholder="请输入处理结果"
                v-model="send.handResult"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="投诉要求" prop="appRequest">
              <el-input
              type="textarea"
              autosize
                placeholder="请输入投诉要求"
                v-model="send.appRequest"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经办人">
              <el-input
                v-model="send.operator"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="经办人意见" prop="operatorOpinion">
              <el-input
              type="textarea"
              autosize
                placeholder="请输入经办人意见"
                v-model="send.operatorOpinion"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
       
      </el-form>
    </rz-dialog>
  </div>
</template>
<script>
var echarts = require("echarts");
import {
  findByFSuperviseunitId,
  recordRindListByCondition,
  findListByConditionSafety,
  saveComplaintComplaint
} from "@/api/modules/interpretation";
import addDialog from "@/views/interpretation/components/addDialog";
import tips from "@/views/interpretation/components/tips";
import scoreInterpretation from "@/views/interpretation/components/scoreInterpretation";

export default {
  // props:[],
  // 页面加载
  created() {
    this.buckleQuery.startDate = this.$moment()
      .subtract(1, "days")
      .format("YYYY-MM-DD");
    // this.getList();
    this.recordRindListByCondition();
    this.findListByConditionSafety();
    this.recordRindListByConditionBuckle();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
        pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      report: false,
      tableData: [],
      // data: {},
      recordList: [],
      show: false,
      query: {
        category: 3,
        endDate: "",
        fsuperviseunitId: sessionStorage.getItem("interpretation"),
        isPage: 0,
        page: 1,
        pageSize: 10,
        startDate: "",
        type: 2,
      },
      buckleQuery: {
        category: 3,
        endDate: "",
        fsuperviseunitId: sessionStorage.getItem("interpretation"),
        isPage: 0,
        page: 1,
        pageSize: 10,
        startDate: "",
        type: 1,
      },
      buckleData: [],
      total: 0,
      buckleTotal: 0,
      loading: false,
      data: {},
      send: {
        appRequest: "",
        argueAccTime:this.$moment().format("YYYY-MM-DD"),
        feeOrganName:sessionStorage.getItem("unitName"),
        handResult: "",
        isTranCase: "",
        operator: sessionStorage.getItem("logname"),
        operatorOpinion: "",
        ptAddr: "",
        repQueType: "",
        type: "1",
        unitId: sessionStorage.getItem("interpretation"),
      },
          rules: {
        repQueType: [{ required: true, message: "请输入问题类别", trigger: "blur" },],
        handResult: [{ required: true, message: "请输入处理结果", trigger: "blur" },],
        appRequest: [{ required: true, message: "请输入投诉要求", trigger: "blur" },],
        operatorOpinion: [{ required: true, message: "请输入经办人意见", trigger: "blur" },],

        
      },
    };
  },
  // 方法
  methods: {
    // getList() {
    //   findByFSuperviseunitId({
    //     params: {
    //       fSuperviseunitId: sessionStorage.getItem("interpretation"),
    //     },
    //   }).then((res) => {
    //     this.data = res.data;
    //   });
    // },
    recordRindListByCondition() {
      recordRindListByCondition(this.query).then((res) => {
        console.log(res);
        this.tableData = res.data;
        this.total = res.totalCount;
        // this.lineInit();
      });
    },
    lineInit() {
      let chartDom = document.querySelector(".food_line");
      let myChart = echarts.init(chartDom);
      let option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "5%",
          right: "8%",
          bottom: "3%",
          top: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.recordList.map((x) => x.createTimeStr).reverse(),
          axisLabel: {
            //底部文字倾斜
            interval: 0,
            rotate: 25,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            itemStyle: { normal: { label: { show: true } } },

            type: "line",
            name: "投诉举报",
            data: this.recordList.map((x) => x.tsjbScore).reverse(),
          },
        ],
      };
      myChart.setOption(option);
    },
    findListByConditionSafety() {
      findListByConditionSafety({
        fSuperviseunitId: sessionStorage.getItem("interpretation"),
        indexYear: new Date().getFullYear(),
        startDate: this.$moment().subtract(10, "day").format("YYYY-MM-DD"),
        endDate: this.$moment().format("YYYY-MM-DD"),
        isReverseTimeOrder: "1",
      }).then((res) => {
        this.recordList = res.data;
        this.lineInit();
      });
    },
    recordRindListByConditionBuckle() {
      if (!this.buckleQuery.startDate) {
        this.buckleQuery.startDate = "";
      }
      this.buckleQuery.endDate = this.buckleQuery.startDate;
      this.loading = true;
      recordRindListByCondition(this.buckleQuery).then((res) => {
        this.loading = false;
        this.buckleData = res.data;
        this.buckleTotal = res.totalCount;
      });
    },
    view(e) {
      this.show = true;
      this.data = e;
    },
    addReport() {
      this.send.appRequest=""
      this.send.handResult=""
      this.send.isTranCase=""
      this.send.operatorOpinion=""
      this.send.ptAddr=""
      this.send.repQueType=""

      this.report = true;
    },
     onconfirm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
           this.$confirm('投诉举报信息提交之后不允许删除或编辑，确定要提交吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         saveComplaintComplaint(this.send).then((res) => {
            this.report = false;
               this.recordRindListByCondition();
            this.$success("保存成功");
          });
        })
          
        }
      });
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: {
    "add-dialog": addDialog,
    "score-interpretation": scoreInterpretation,
    tips,
  },
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
// .line {
//   display: flex;
//   background-color: #99cc66;
//   color: #fff;
//   .left {
//     width: 100px;
//     height: 100px;
//     background-color: red;
//   }
//   .right {
//       position: relative;
//     display: flex;
//     padding-left: 20px;
//     justify-content: space-evenly;
//     flex: 1;
//     align-items: flex-start;
//     flex-direction: column;
//   }
// }
.tips {
  position: relative;
}
.dialog_titel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    font-size: 20px;
    font-weight: 700;
  }
}
.food_line {
  height: 210px;
  width: 100%;
}
</style>